<script setup lang="ts">
import PostComment from './PostComment.vue'
import { inject } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@store/index'
import { PostDto, popMessage, popMessageKey } from '@/type'
import { likePost } from '@utils/api'

const popMessage = inject(popMessageKey) as popMessage
const router = useRouter()
const store = useStore()

// 获取 BASEURL
const BASEURL = store.getBaseUrl()

const props = defineProps<{
    postList: PostDto[],
    switchShow: Function,
    updatePost: Function
}>()


const like = (id: string) => {
    likePost(id).then((res) => {
        if (res.data.code == 1) {
            popMessage('点赞成功', 'success')
            props.updatePost(id)
        } else {
            if (res.data.msg == "已经点赞") {
                popMessage("已经点赞", 'error')
            }
        }
    })
}

</script>

<template>
    <ul class="post-list">
        <li v-for="post, index in props.postList">
            <div @click="router.push('/personCenter/' + post.userId + '/false')" class="avatar">
                <a>
                    <img :src="BASEURL + '/static/image/' + post.avatar" style="width: 45px; height: 45px;">
                </a>
            </div>
            <div class="content">
                <div class="user">
                    <a @click="router.push('/personCenter/' + post.userId + '/false')">{{ post.username }}</a>
                </div>
                <div class="time">
                    <a>{{
                        post.createTime[0] + '年' +
                        post.createTime[1] + '月' +
                        post.createTime[2] + '日 ' +
                        post.createTime[3] + ':' +
                        post.createTime[4]
                    }}</a>
                </div>
                <div class="text">{{ post.content }}</div>
                <div class="img" v-for="img in post.imageList">
                    <img :src="BASEURL + '/static/image/' + img" alt="">
                </div>
                <div class="social">
                    <a @click="like(post.id)" id="likes">
                        <svg t="1701509500734" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2871" width="17px" height="17px">
                            <path
                                d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667zM544.256 149.333333c39.253333 0 59.498667 36.48 49.888 84.928-7.573333 38.144-21.984 104.426667-43.221333 198.666667-4.512 20.021333 10.56 39.093333 30.912 39.093333h218.666666c6.101333 0 12.16 1.066667 17.909334 3.168 27.445333 9.984 41.674667 40.554667 31.776 68.266667l-85.568 239.573333C744.981333 838.026667 693.301333 874.666667 635.402667 874.666667H223.498667C194.314667 874.666667 170.666667 850.784 170.666667 821.333333V503.498667c0-17.866667 14.144-32.448 31.829333-32.821334l21.866667-0.469333a221.12 221.12 0 0 0 167.381333-82.56c34.346667-42.602667 59.146667-99.306667 74.869333-169.877333C482.101333 166.336 499.552 149.333333 544.266667 149.333333z"
                                fill="#0C73C2" p-id="2872"></path>
                        </svg>
                        <div>&nbsp;({{ post.likes }})</div>
                    </a>
                    <span>|</span>
                    <!-- <a>
                        <div>转发&nbsp;({{ post.shareCount }})</div>
                    </a>
                    <span>|</span> -->
                    <a @click="switchShow(index)">
                        <div>评论&nbsp;</div>
                        <i v-if="post.commentCount" style="font-style: normal;">({{ post.commentCount }})</i>
                    </a>
                </div>
                <PostComment v-if="postList[index].showComment" :postId="postList[index].id"
                    :is-show="postList[index].showComment" :switchShow="switchShow" :index="index"
                    :comment-count="postList[index].commentCount" :show-more="true" :show-comment="true"
                    :update-post="props.updatePost" />

            </div>
        </li>
    </ul>
</template>

<style scoped lang="css">
.post-list {
    list-style: none;
    display: block;
    margin: 0;
    padding: 0px;
}

ul li {
    display: flex;
    height: 100%;
    border-bottom: 1px solid #E8E8E9;
    padding: 20px 0px;
}

.post-list .avatar {
    float: left;
    padding-right: 8px;
}

.post-list .content {
    flex: right;
    width: 100%;
    padding-top: 4px;
}

a {
    cursor: pointer;
    text-decoration: none !important;
}

a:hover {
    text-decoration: underline !important;
}

.content .user a {
    color: #0C73C2 !important;
}

.content .time {
    height: 16px;
    margin-top: 4px;
}

.time {
    color: #999;
    font-size: 12px;
}

.time a {
    color: #999;
    font-size: 12px;
}

.content .text {
    margin-top: 10px;
}

.img img {
    width: 300px;
    height: 300px;
}

.content .social {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    font-size: 12px;
}

.content .social a {
    display: flex;
    color: #0C73C2;
}

.content .social span {
    margin: 0px 10px 0px 12px;
    color: #C7C7C7;
}


.img {
    display: flex !important;
    /* flex-wrap: wrap; */
}
</style>
